<form [formGroup]="formGroup" [bitSubmit]="submit">
  <bit-dialog [disablePadding]="!loading" dialogSize="large">
    <span bitDialogTitle>
      {{ title }}
      <span class="tw-text-sm tw-normal-case tw-text-muted" *ngIf="!loading && params.name">{{
        params.name
      }}</span>
      <span bitBadge variant="secondary" *ngIf="isRevoked">{{ "revoked" | i18n }}</span>
    </span>
    <div bitDialogContent>
      <ng-container *ngIf="loading">
        <i
          class="bwi bwi-spinner bwi-spin text-muted"
          title="{{ 'loading' | i18n }}"
          aria-hidden="true"
        ></i>
        <span class="sr-only">{{ "loading" | i18n }}</span>
      </ng-container>
      <bit-tab-group *ngIf="!loading" [(selectedIndex)]="tabIndex">
        <bit-tab [label]="'role' | i18n">
          <ng-container *ngIf="!editMode">
            <p>{{ "inviteUserDesc" | i18n }}</p>
            <bit-form-field>
              <bit-label>{{ "email" | i18n }}</bit-label>
              <input id="emails" type="text" appAutoFocus bitInput formControlName="emails" />
              <bit-hint>{{
                "inviteMultipleEmailDesc"
                  | i18n: (organization.planProductType === ProductType.TeamsStarter ? "10" : "20")
              }}</bit-hint>
            </bit-form-field>
          </ng-container>
          <fieldset role="radiogroup" aria-labelledby="roleGroupLabel" class="tw-mb-6">
            <legend
              id="roleGroupLabel"
              class="tw-mb-2 tw-block tw-text-base tw-font-semibold tw-text-main"
            >
              {{ "memberRole" | i18n }}
              <a
                target="_blank"
                rel="noopener"
                appA11yTitle="{{ 'learnMore' | i18n }}"
                href="https://bitwarden.com/help/user-types-access-control/"
              >
                <i class="bwi bwi-question-circle" aria-hidden="true"></i>
              </a>
            </legend>
            <div class="tw-mb-2 tw-flex tw-items-baseline">
              <input
                type="radio"
                id="userTypeUser"
                [value]="organizationUserType.User"
                class="tw-relative tw-bottom-[-1px] tw-mr-2"
                formControlName="type"
                name="type"
              />
              <label class="tw-m-0" for="userTypeUser">
                {{ "user" | i18n }}
                <div class="text-base tw-block tw-font-normal tw-text-muted">
                  {{ "userDesc" | i18n }}
                </div>
              </label>
            </div>
            <div
              *ngIf="!(flexibleCollectionsEnabled$ | async)"
              class="tw-mb-2 tw-flex tw-items-baseline"
            >
              <input
                type="radio"
                id="userTypeManager"
                [value]="organizationUserType.Manager"
                class="tw-relative tw-bottom-[-1px] tw-mr-2"
                formControlName="type"
                name="type"
              />
              <label class="tw-m-0" for="userTypeManager">
                {{ "manager" | i18n }}
                <div class="text-base tw-block tw-font-normal tw-text-muted">
                  {{ "managerDesc" | i18n }}
                </div>
              </label>
            </div>
            <div class="tw-mb-2 tw-flex tw-items-baseline">
              <input
                type="radio"
                id="userTypeAdmin"
                [value]="organizationUserType.Admin"
                class="tw-relative tw-bottom-[-1px] tw-mr-2"
                formControlName="type"
                name="type"
              />
              <label class="tw-m-0" for="userTypeAdmin">
                {{ "admin" | i18n }}
                <div class="text-base tw-block tw-font-normal tw-text-muted">
                  {{ "adminDesc" | i18n }}
                </div>
              </label>
            </div>
            <div class="tw-mb-2 tw-flex tw-items-baseline">
              <input
                type="radio"
                id="userTypeOwner"
                [value]="organizationUserType.Owner"
                class="tw-relative tw-bottom-[-1px] tw-mr-2"
                formControlName="type"
                name="type"
              />
              <label class="tw-m-0" for="userTypeOwner">
                {{ "owner" | i18n }}
                <div class="text-base tw-block tw-font-normal tw-text-muted">
                  {{ "ownerDesc" | i18n }}
                </div>
              </label>
            </div>
            <div class="tw-flex tw-items-baseline">
              <input
                type="radio"
                id="userTypeCustom"
                [value]="organizationUserType.Custom"
                formControlName="type"
                name="type"
                class="tw-relative tw-bottom-[-1px] tw-mr-2"
                [attr.disabled]="!canUseCustomPermissions || null"
              />
              <label class="tw-m-0" for="userTypeCustom">
                {{ "custom" | i18n }}
                <ng-container *ngIf="!canUseCustomPermissions; else enterprise">
                  <div class="text-base tw-block tw-font-normal tw-text-muted">
                    {{ "customDescNonEnterpriseStart" | i18n
                    }}<a href="https://bitwarden.com/contact/" target="_blank">{{
                      "customDescNonEnterpriseLink" | i18n
                    }}</a
                    >{{ "customDescNonEnterpriseEnd" | i18n }}
                  </div>
                </ng-container>
                <ng-template #enterprise>
                  <div class="text-base tw-block tw-font-normal tw-text-muted">
                    {{ "customDesc" | i18n }}
                  </div>
                </ng-template>
              </label>
            </div>
          </fieldset>
          <ng-container *ngIf="customUserTypeSelected">
            <ng-container *ngIf="!(flexibleCollectionsEnabled$ | async); else customPermissionsFC">
              <h3 class="mt-4 d-flex tw-font-semibold">
                {{ "permissions" | i18n }}
              </h3>
              <div class="row" [formGroup]="permissionsGroup">
                <div class="col-6">
                  <div class="mb-3">
                    <label class="tw-font-semibold">{{ "managerPermissions" | i18n }}</label>
                    <hr class="tw-mb-2 tw-mr-2 tw-mt-0" />
                    <app-nested-checkbox
                      parentId="manageAssignedCollections"
                      [checkboxes]="permissionsGroup.controls.manageAssignedCollectionsGroup"
                    >
                    </app-nested-checkbox>
                  </div>
                </div>
                <div class="col-6">
                  <div class="mb-3">
                    <label class="tw-font-semibold">{{ "adminPermissions" | i18n }}</label>
                    <hr class="tw-mb-2 tw-mr-2 tw-mt-0" />
                    <div>
                      <input
                        type="checkbox"
                        name="accessEventLogs"
                        id="accessEventLogs"
                        formControlName="accessEventLogs"
                      />
                      <label class="!tw-font-normal" for="accessEventLogs">
                        {{ "accessEventLogs" | i18n }}
                      </label>
                    </div>
                    <div>
                      <input
                        type="checkbox"
                        name="accessImportExport"
                        id="accessImportExport"
                        formControlName="accessImportExport"
                      />
                      <label class="!tw-font-normal" for="accessImportExport">
                        {{ "accessImportExport" | i18n }}
                      </label>
                    </div>
                    <div>
                      <input
                        type="checkbox"
                        name="accessReports"
                        id="accessReports"
                        formControlName="accessReports"
                      />
                      <label class="!tw-font-normal" for="accessReports">
                        {{ "accessReports" | i18n }}
                      </label>
                    </div>
                    <app-nested-checkbox
                      parentId="manageAllCollections"
                      [checkboxes]="permissionsGroup.controls.manageAllCollectionsGroup"
                    >
                    </app-nested-checkbox>
                    <div>
                      <input
                        type="checkbox"
                        name="manageGroups"
                        id="manageGroups"
                        formControlName="manageGroups"
                      />
                      <label class="!tw-font-normal" for="manageGroups">
                        {{ "manageGroups" | i18n }}
                      </label>
                    </div>
                    <div>
                      <input
                        type="checkbox"
                        name="manageSso"
                        id="manageSso"
                        formControlName="manageSso"
                      />
                      <label class="!tw-font-normal" for="manageSso">
                        {{ "manageSso" | i18n }}
                      </label>
                    </div>
                    <div>
                      <input
                        type="checkbox"
                        name="managePolicies"
                        id="managePolicies"
                        formControlName="managePolicies"
                      />
                      <label class="!tw-font-normal" for="managePolicies">
                        {{ "managePolicies" | i18n }}
                      </label>
                    </div>
                    <div>
                      <input
                        type="checkbox"
                        name="manageUsers"
                        id="manageUsers"
                        formControlName="manageUsers"
                        (change)="handleDependentPermissions()"
                      />
                      <label class="!tw-font-normal" for="manageUsers">
                        {{ "manageUsers" | i18n }}
                      </label>
                    </div>
                    <div>
                      <input
                        type="checkbox"
                        name="manageResetPassword"
                        id="manageResetPassword"
                        formControlName="manageResetPassword"
                        (change)="handleDependentPermissions()"
                      />
                      <label class="!tw-font-normal" for="manageResetPassword">
                        {{ "manageAccountRecovery" | i18n }}
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            </ng-container>
            <ng-template #customPermissionsFC>
              <div class="row" [formGroup]="permissionsGroup">
                <div class="col-4">
                  <div>
                    <input
                      type="checkbox"
                      name="accessEventLogs"
                      id="accessEventLogs"
                      formControlName="accessEventLogs"
                    />
                    <label class="!tw-font-normal" for="accessEventLogs">
                      {{ "accessEventLogs" | i18n }}
                    </label>
                  </div>
                  <div>
                    <input
                      type="checkbox"
                      name="accessImportExport"
                      id="accessImportExport"
                      formControlName="accessImportExport"
                    />
                    <label class="!tw-font-normal" for="accessImportExport">
                      {{ "accessImportExport" | i18n }}
                    </label>
                  </div>
                  <div>
                    <input
                      type="checkbox"
                      name="accessReports"
                      id="accessReports"
                      formControlName="accessReports"
                    />
                    <label class="!tw-font-normal" for="accessReports">
                      {{ "accessReports" | i18n }}
                    </label>
                  </div>
                </div>
                <div class="col-4">
                  <app-nested-checkbox
                    parentId="manageAllCollections"
                    [checkboxes]="permissionsGroup.controls.manageAllCollectionsGroup"
                  >
                  </app-nested-checkbox>
                </div>
                <div class="col-4">
                  <div class="mb-3">
                    <div>
                      <input
                        type="checkbox"
                        name="manageGroups"
                        id="manageGroups"
                        formControlName="manageGroups"
                      />
                      <label class="!tw-font-normal" for="manageGroups">
                        {{ "manageGroups" | i18n }}
                      </label>
                    </div>
                    <div>
                      <input
                        type="checkbox"
                        name="manageSso"
                        id="manageSso"
                        formControlName="manageSso"
                      />
                      <label class="!tw-font-normal" for="manageSso">
                        {{ "manageSso" | i18n }}
                      </label>
                    </div>
                    <div>
                      <input
                        type="checkbox"
                        name="managePolicies"
                        id="managePolicies"
                        formControlName="managePolicies"
                      />
                      <label class="!tw-font-normal" for="managePolicies">
                        {{ "managePolicies" | i18n }}
                      </label>
                    </div>
                    <div>
                      <input
                        type="checkbox"
                        name="manageUsers"
                        id="manageUsers"
                        formControlName="manageUsers"
                        (change)="handleDependentPermissions()"
                      />
                      <label class="!tw-font-normal" for="manageUsers">
                        {{ "manageUsers" | i18n }}
                      </label>
                    </div>
                    <div>
                      <input
                        type="checkbox"
                        name="manageResetPassword"
                        id="manageResetPassword"
                        formControlName="manageResetPassword"
                        (change)="handleDependentPermissions()"
                      />
                      <label class="!tw-font-normal" for="manageResetPassword">
                        {{ "manageAccountRecovery" | i18n }}
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            </ng-template>
          </ng-container>
          <ng-container *ngIf="canUseSecretsManager">
            <h3 class="mt-4">
              {{ "secretsManager" | i18n }}
              <a
                target="_blank"
                rel="noopener"
                appA11yTitle="{{ 'learnMore' | i18n }}"
                href="https://bitwarden.com/help/manage-your-organization/#access-to-secrets-manager"
              >
                <i class="bwi bwi-question-circle" aria-hidden="true"></i>
              </a>
            </h3>
            <p class="tw-text-muted">{{ "secretsManagerAccessDescription" | i18n }}</p>
            <bit-form-control>
              <input type="checkbox" bitCheckbox formControlName="accessSecretsManager" />
              <bit-label>
                {{ "userAccessSecretsManagerGA" | i18n }}
              </bit-label>
            </bit-form-control>
          </ng-container>
          <bit-form-field>
            <bit-label>{{ "externalId" | i18n }}</bit-label>
            <input bitInput type="text" formControlName="externalId" />
            <bit-hint>{{ "externalIdDesc" | i18n }}</bit-hint>
          </bit-form-field>
        </bit-tab>
        <bit-tab *ngIf="organization.useGroups" [label]="'groups' | i18n">
          <div class="tw-mb-6">
            {{ "groupAccessUserDesc" | i18n }}
          </div>
          <bit-access-selector
            formControlName="groups"
            [items]="groupAccessItems"
            [columnHeader]="'groups' | i18n"
            [selectorLabelText]="'selectGroups' | i18n"
            [emptySelectionText]="'noGroupsAdded' | i18n"
            [flexibleCollectionsEnabled]="flexibleCollectionsEnabled$ | async"
          ></bit-access-selector>
        </bit-tab>
        <bit-tab [label]="'collections' | i18n">
          <div *ngIf="organization.useGroups" class="tw-mb-6">
            {{ "userPermissionOverrideHelper" | i18n }}
          </div>
          <div *ngIf="!(flexibleCollectionsEnabled$ | async)" class="tw-mb-6">
            <bit-form-control>
              <input type="checkbox" bitCheckbox formControlName="accessAllCollections" />
              <bit-label>
                {{ "accessAllCollectionsDesc" | i18n }}
                <a
                  target="_blank"
                  rel="noopener"
                  appA11yTitle="{{ 'learnMore' | i18n }}"
                  href="https://bitwarden.com/help/user-types-access-control/#access-control"
                >
                  <i class="bwi bwi-question-circle" aria-hidden="true"></i>
                </a>
              </bit-label>
              <bit-hint>{{ "accessAllCollectionsHelp" | i18n }}</bit-hint>
            </bit-form-control>
          </div>
          <bit-access-selector
            *ngIf="!accessAllCollections"
            [permissionMode]="PermissionMode.Edit"
            formControlName="access"
            [showGroupColumn]="organization.useGroups"
            [items]="collectionAccessItems"
            [columnHeader]="'collection' | i18n"
            [selectorLabelText]="'selectCollections' | i18n"
            [emptySelectionText]="'noCollectionsAdded' | i18n"
            [flexibleCollectionsEnabled]="flexibleCollectionsEnabled$ | async"
          ></bit-access-selector
        ></bit-tab>
      </bit-tab-group>
    </div>
    <ng-container bitDialogFooter>
      <button type="submit" bitButton bitFormButton buttonType="primary" [disabled]="loading">
        {{ "save" | i18n }}
      </button>
      <button
        type="button"
        bitButton
        bitFormButton
        buttonType="secondary"
        (click)="cancel()"
        [disabled]="loading"
      >
        {{ "cancel" | i18n }}
      </button>
      <div class="tw-ml-auto">
        <button
          *ngIf="editMode && isRevoked"
          type="button"
          bitButton
          bitFormButton
          buttonType="secondary"
          [bitAction]="restore"
          [disabled]="loading"
        >
          {{ "restoreAccess" | i18n }}
        </button>
        <button
          *ngIf="editMode && !isRevoked"
          type="button"
          bitButton
          bitFormButton
          buttonType="secondary"
          [bitAction]="revoke"
          [disabled]="loading"
        >
          {{ "revokeAccess" | i18n }}
        </button>
        <button
          *ngIf="editMode"
          type="button"
          bitIconButton="bwi-trash"
          buttonType="danger"
          bitFormButton
          [appA11yTitle]="'delete' | i18n"
          [bitAction]="delete"
          [disabled]="loading"
        ></button>
      </div>
    </ng-container>
  </bit-dialog>
</form>
